<template>
  <a-card :bordered="false">
    <div style="width: 100%; height: 100%">
      <div style="padding: 0">
        <div class="filter-container" style="position: absolute; padding: 20px; z-index: 10">
          <a-input v-model="listQuery.clientId" placeholder="输入项目网关号" style="width: 200px" class="filter-item" />
          <a-button class="filter-item" type="primary" icon="el-icon-search" @click="search">查询</a-button>
        </div>
        <div ref="map" id="map" style="width: 100%; height: 100%"></div>
      </div>

      <!-- <el-dialog
      title="项目运行详情"
      :visible.sync="dialogPanelVisible"
      :fullscreen="true"
      v-if="dialogPanelVisible"
    >
      <EquipmentDetail :clientId="currentClientId"  :equipmentId="currentEquipmentId" :inforId="currentInforId"/>
    </el-dialog> -->
      <template>
        <j-modal :title="title" :width="width" :visible="visible" switchFullscreen @ok="handleOk"
          :okButtonProps="{ class: { 'jee-hidden': disableSubmit } }" @cancel="handleCancel" cancelText="关闭">
          <div style="position: absolute; margin-left:10px; padding: 40px; z-index: 10">
            <template>
              <!-- <a-tooltip placement="top" title="基本信息" :autoAdjustOverflow="true">
                <a-button @click="() => {this.$refs.baseInfo.open(this.currentRecord)}">基本信息</a-button>
              </a-tooltip> -->
              <a-tooltip placement="top" title="报警信息" :autoAdjustOverflow="true">
                <a-button @click="() => { this.$refs['errorDataQuery'].openModal() }">报警信息</a-button>
              </a-tooltip>
              <a-tooltip placement="top" title="实时信息" :autoAdjustOverflow="true">
                <a-button @click="() => { 
                  this.$refs['runDataQuery'].openModal() }">实时信息</a-button>
              </a-tooltip>
              <a-tooltip placement="top" title="历史信息" :autoAdjustOverflow="true">
                <a-button @click="() => { this.$refs['runDataQuery'].openModal() }">历史信息</a-button>
              </a-tooltip>
            </template>
          </div>
          <a-card :bordered="false">
            <equipment-runing-bigscreen ref="runingBigscreen" :mapRefresh="mapRefresh" />
          </a-card>
        </j-modal>
      </template>
    </div>
    <!-- <equipment-base-info ref="baseInfo" /> -->
    <j-onl-query-modal ref="demo" code="demo" field="name" orgFields="name" destFields="name" :multi="true" />
    <j-onl-query-modal ref="runDataQuery" code="runDataQuery" :param="popRunParam" field="name"
      orgFields="name" destFields="name" :multi="true" />
    <j-onl-query-modal ref="errorDataQuery" code="errorDataQuery" :param="popErrorMsgParam" field="name" orgFields="name"
      destFields="name" :multi="true" />
  </a-card>
  </template>
  </div>
  </a-card>
</template>

<script>
import 'ol/ol.css'
import { Zs } from '@/utils/ol.extend.js'
import EquipmentRuningBigscreen from '../mng/EquipmentRuningBigscreen.vue'
import JOnlQueryModal from '../../../components/jeecg/JOnlQueryModal.vue'
import EquipmentBaseInfo from './modules/EquipmentBaseInfo.vue'
export default {
  components: { EquipmentRuningBigscreen, JOnlQueryModal, EquipmentBaseInfo },
  data() {
    return {
      popErrorMsgParam: { parameter_group: 'G020' },
      popRunParam:null,
      treeOrgData: [],
      defaultProps: {
        label: 'name',
        isLeaf: 'isLeaf',
      },
      zs: null,
      dialogPanelVisible: false,
      disableSubmit: true,
      lonlat: '',
      geom: '',
      title: '',
      width: 1400,
      visible: false,
      currentLayer: null,
      listQuery: {
        current: 1,
        size: 5000,
        clientId: undefined,
        customerId: undefined,
        epDepartId: undefined,
      },
      equipmentList: [],
      currentClientId: null,
      currentEquipmentId: null,
      currentInforId: null,
      mapRefresh: '',
      currentRecord: null,
    }
  },
  created() { },
  watch: {
    mapRefresh: {
      handler: function (nval, oval) {
        this.changeMap()
      },
    },
  },
  mounted() {
    this.$refs['map'].style.height = window.innerHeight - 84 + 'px'
    this.zs = new Zs({
      target: 'map',
      zoom: 8,
      click: function () { },
    })
    // this.renderList();
  },
  methods: {
    handleOk() {
      this.close()
    },
    handleCancel() {
      this.close()
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    open(record) {
      this.equipmentList = []
      debugger
      console.log(record)
      // record.name = 'my name'
      this.currentRecord = record
      this.equipmentList.push(record)
      this.currentEquipmentId=record.id
      this.popRunParam={equipment_id:this.currentEquipmentId}
      this.renderList()
      //this.$refs.runDataQuery.openModal()
    },
    changeMap() {
      console.log(1)
      this.zs.map.updateSize()
    },
    myMapRefresh(date) {
      console.log(date)
      this.mapRefresh = date
    },
    //初始化数据
    async renderList() {
      var self = this
      var zs = this.zs
      // let res = await listInstallation(this.listQuery);
      // this.equipmentList = res.data.records;
      if (this.currentLayer) {
        zs.map.removeLayer(this.currentLayer)
      }

      var data = zs.addFeatures(this.equipmentList, {
        addToLayer: false,
        isShowText: true,
        textField: 'equipment.name',
        isShowImg: true,
        offsetY: -45,
        click: function (e) {
          var feature = e.target
          var id = feature.get('id')
          console.log(id)
          self.currentClientId = null
          self.equipmentList.forEach(function (v, k) {
            if (v.id == id) {
              if (v.clientId) {
                self.currentClientId = v.clientId
                self.currentEquipmentId = v.equipmentId
                self.currentInforId = v.id
                
              }
            }
          })
          self.visible = true
          // if (self.currentClientId) {
          //   self.dialogPanelVisible = true
          // } else {
          //   self.$message.error('此项目未绑定安装信息，无法查看运行详情数据')
          // }
        },
      })

      if (this.equipmentList) {
        var gotoFlag = true
        this.equipmentList.forEach(function (v, k) {
          if (v.lonlat && gotoFlag) {
            zs.goTo(v.lonlat)
            gotoFlag = false
          }
        })
      }
      this.currentLayer = data.layer
      //zs.map.addLayer(res.layer);
      zs.addCluster(data.features)
    },
    search() {
      this.renderList()
    },
  },
}
</script>
<style scoped></style>
